<template>
  <a-modal
    title="租約詳情"
    :width="1000"
    class="main-class"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @cancel="handleCancel"
    footer=""
  >
  <div class="print">
    <div class="main-content">
      <a-row>
          <a-col :span="12"><h2 class="zkxx">租客信息</h2></a-col>
          <a-col :span="12" v-if="form.leaseStatus !== 2">
            <a-button @click="$refs.editZuKeForm.edit(form)" type="primary" class="item-end" ghost>
              修改
            </a-button>
          </a-col>
      </a-row>
      <a-row class="main-content-item">
        <a-col :span="24" class="ydxx">
          <a-row>
            <a-col :span="8">{{ form.name }}</a-col>
            <a-col :span="8">{{ form.phone }}</a-col>
            <a-col :span="8">
              <img :src="'/api/sysFileInfo/preview?id='+form.idCardImagesFront" style="max-width: 20%;width:100px">
              <img :src="'/api/sysFileInfo/preview?id='+form.idCardImagesBack"  style="max-width: 20%;width:100px">
            </a-col>
          </a-row>
           <a-row v-for="(item,index) in form.leaseLiveData" :key="index">
            <a-col :span="8">{{ item.name }}</a-col>
            <a-col :span="8">{{ item.phone }}</a-col>
            <a-col :span="8"><img :src="'/api/sysFileInfo/preview?id='+item.idCardImagesFront" style="max-width: 20%;width:100px">
              <img :src="'/api/sysFileInfo/preview?id='+item.idCardImagesBack"  style="max-width: 20%;width:100px"></a-col>
          </a-row>
          <h4>{{ form.roomName }}</h4>
          <h4>租期: {{ form.rentStartDate }}~{{ form.rentEndDate }}</h4>
          <h4>{{ form.receiptCycle }}</h4>
          <h4>租金: {{ form.rent }}元/月</h4>
          <h4>房屋押金: {{ form.deposit }}元</h4>
          <h4>賬單起始日: 起租日</h4>
          <h4 v-show="form.rentReminderSwitch === 1">收租提醒: 提前{{ form.rentReminderDay }}天 提醒時間：{{ form.rentReminderHour }}點{{ form.rentReminderMinutes }}分</h4>
          <h4>備注: {{ form.remark }}</h4>
        </a-col>
      </a-row>
    </div>
    <div class="main-content">
      <a-row>
          <a-col :span="12"><h2 class="zkxx">其他押金</h2></a-col>
          <a-col :span="12" v-if="form.leaseStatus !== 2">
            <a-button @click="$refs.editFyForm.edit(form)" type="primary" class="item-end" ghost>
              修改
            </a-button>
          </a-col>
      </a-row>
      <a-table
        size="middle"
        :columns="columnsYj"
        :dataSource="yjList"
        :pagination="false"
        :loading="memberLoading">
        <template slot="quantity" slot-scope="text,record">
          <span v-if="record.deposittype === 1">{{ text }}</span>
          <span v-else> - </span>
        </template>
      </a-table>
      <h2 class="zkxx">水電物業</h2>
       <a-row>
          <a-col :span="12">水電收費週期{{ form.hydropowercycle }}月</a-col>
      </a-row>
      <!-- <a-row>
          <a-col :span="12">賬單起始日：起租日
            <span v-if="form.hydropowerBillEndType ===0">提前{{ form.hydropowerBillEndTqData }}天受阻</span>
            <span v-if="form.hydropowerBillEndType ===1">固定{{ form.hydropowerBillEndGdmonthData }}月{{ form.hydropowerBillEndGddayData }}日收租</span>
          </a-col>
      </a-row> -->
      <a-table
        size="middle"
        :columns="columnsSd"
        :dataSource="sdList"
        :pagination="false"
        :loading="memberLoading">
        <template slot="quantity" slot-scope="text,record">
          <span v-if="record.type === 3">在账单中填写</span>
          <span v-else> {{ text }} </span>
        </template>
        <template slot="solder" slot-scope="text,record">
          <span v-if="record.type === 2">{{ text }}</span>
          <span v-else> - </span>
        </template>
        <template slot="magnification" slot-scope="text,record">
          <span v-if="record.type === 2">{{ text }}</span>
          <span v-else> - </span>
        </template>
        <template slot="patchlossrate" slot-scope="text,record">
          <span v-if="record.type === 2">{{ text }}</span>
          <span v-else> - </span>
        </template>
        <template slot="initialreading" slot-scope="text,record">
          <span v-if="record.type === 2">{{ text }}</span>
          <span v-else> - </span>
        </template>
        <template slot="operation" slot-scope="text, record">
          <div v-if="record.type === 2">
            <a @click="$refs.meterHisReadForm.edit(form.id, record.costid)">歷史讀數</a>
            <a-divider type="vertical"  v-if="form.leaseStatus !== 2"/>
            <a @click="$refs.editHuanBiaoFormOne.edit(form.id, record.costid)">換表</a>
          </div>
        </template>
      </a-table>
    </div>
    <div class="main-content">
      <a-row>
          <a-col :span="12"><h2 class="zkxx">家私配置</h2></a-col>
          <a-col :span="12" v-if="form.leaseStatus !== 2">
            <a-button @click="$refs.editJsForm.edit(form.id)" type="primary" class="item-end" ghost>
              修改
            </a-button>
          </a-col>
      </a-row>
      <a-table
        size="middle"
        :columns="columnsJs"
        :dataSource="jsList"
        :pagination="false"
        :loading="memberLoading">
      </a-table>
    </div>
  </div>
  <edit-zu-ke-form ref="editZuKeForm" @ok="handleOk" />
  <edit-fy-form ref="editFyForm" @ok="handleOk" />
  <edit-js-form ref="editJsForm" @ok="handleOk" />
  <meter-his-read-form ref="meterHisReadForm" />
  <edit-huan-biao-form-one ref="editHuanBiaoFormOne" @ok="handleOk"/>
  </a-modal>
</template>
<script>
  import { STable } from '@/components'
  import { getIsLeaseMsgPrint } from '@/api/modular/main/houselease/houseLeaseManage'
  import editZuKeForm from './editZuKeForm.vue'
  import editFyForm from './editFyForm.vue'
  import editJsForm from './editJsForm.vue'
  import meterHisReadForm from './meterHisReadForm.vue'
  import editHuanBiaoFormOne from '../hydropowermeter/editHuanBiaoFormOne.vue'
  import moment from 'moment'
  export default {
    components: {
      STable,
      editZuKeForm,
      editFyForm,
      editJsForm,
      meterHisReadForm,
      editHuanBiaoFormOne
    },
    data () {
      return {
        visible: false,
        confirmLoading: false,
        memberLoading: false,
        form: {},
        columnsYj: [
          {
            title: '押金項',
            align: 'center',
            dataIndex: 'depositname'
          },
          {
            title: '金額',
            align: 'center',
            dataIndex: 'amount'
          },
          {
            title: '數量',
            align: 'center',
            dataIndex: 'quantity',
            scopedSlots: { customRender: 'quantity' }
          }
        ],
        columnsSd: [
          {
            title: '名稱',
            align: 'center',
            dataIndex: 'name'
          },
          {
            title: '價格',
            align: 'center',
            dataIndex: 'amount'
          },
          {
            title: '保底用量',
            align: 'center',
            dataIndex: 'solder',
            scopedSlots: { customRender: 'solder' }
          },
          {
            title: '倍率',
            align: 'center',
            dataIndex: 'magnification',
            scopedSlots: { customRender: 'magnification' }
          },
          {
            title: '表損率',
            align: 'center',
            dataIndex: 'patchlossrate',
            scopedSlots: { customRender: 'patchlossrate' }
          },
          {
            title: '初始讀數',
            align: 'center',
            dataIndex: 'initialreading',
            scopedSlots: { customRender: 'initialreading' }
          },
          {
            title: '操作',
            key: 'action',
            scopedSlots: { customRender: 'operation' }
          }
        ],
        columnsJs: [
          {
            title: '配置',
            align: 'center',
            dataIndex: 'name'
          },
          {
            title: '數量',
            align: 'center',
            dataIndex: 'quantity'
          },
          {
            title: '賠償金額',
            align: 'center',
            dataIndex: 'price',
            scopedSlots: { customRender: 'price' }
          }
        ],
        yjList: [],
        sdList: [],
        jsList: [],
        id: ''
      }
    },
    methods: {
      moment,
      // 初始化方法
      edit (record) {
        this.visible = true
        this.id = record
        this.getData(record)
      },
      getData (id) {
        getIsLeaseMsgPrint(id).then((res) => {
          if (res.code === 200) {
            this.form = res.data
            this.yjList = res.data.yjList
            this.jsList = res.data.jsList
            this.sdList = res.data.fyList
          } else {
            this.$message.error('查詢失敗')//  + res.message
          }
        })
      },
      handleOk() {
        this.getData(this.id)
      },
      handleSubmit () {
        this.handleCancel()
        this.$emit('ok', '')
      },
      handleCancel () {
        this.visible = false
        this.form = {}
        this.id = []
        this.yjList = []
        this.sdList = []
        this.jsList = []
      }
    }
  }
</script>
<style scoped>
.main-class{
  height: 100px;
}
.print{
  padding: 6px 10px;
}
.title{
  text-align: center;
  tab-size: 20px;
}
.item-end{
  float: right;
}
.main-content{
  margin-top: 10px;
  margin-bottom: 10px;
  border: solid 1px rgb(218, 211, 211);
}
.dj{
  border-bottom: solid 1px rgb(218, 211, 211);
}
.main-content-item{
  padding: 10px;
}
.zkxx{
  margin: 6px 0px 6px 6px;
}
.divider-content-only{
    font-size: 20px;
    margin-bottom: 10px;
  }
  .divider-content-center-only{
      margin-top: 10px;
  }
  .span-calculateStyle{
    font-size: 14px;
    margin-bottom: 20px;
  }
.phone{
  margin-left: 40px;
}
.ydxx{
  font-size: 16px;
}
</style>
